<template>
  <div class="main-list" id="root">
    <div class="search">
      <div class="search-icon"></div>
      <input type="text" placeholder="搜索部门、姓名" :value="keyword" @input="changeInput" @keyup.enter="startSearch" />
    </div>
    <div class="searchbtn" @click="showDanwei">
      全部单位
    </div>
    <div class="subtit">
      广播传媒中心
    </div>
    <div class="pd">
      <template v-for="(itemp,i) in searchList" :key="i">
        <div class="item">
          <div class="tit">
            <div>{{itemp.title}}</div>
            <div class="icon1"></div>
          </div>
          <template v-for="(item,index) in itemp.audio" :key="index">
            <div class="audio dba" v-if="isList(item.isList,scene)">
              <div class="name">{{item.mname}}</div>
              <div class="long">{{item.long}}</div>
              <div class="btn" :data-id="item.id">己点播</div>
            </div>
            <div class="audio db" v-else>
              <div class="name">{{item.mname}}</div>
              <div class="long">{{item.long}}</div>
              <div class="btn" :data-id="item.auid" @click="dianBo">点播</div>
            </div>
          </template>
        </div>
      </template>
      <div style="height:100px"></div>
    </div>

  </div>
  <Danwei v-if="isShowDanwei" @emitDanwei="emitDanwei" @emitGetSearch="emitGetSearch" />
  <Tips :message="message" v-if="message" />
</template>

<script>
import pubsub from 'pubsub-js'
import {
  computed,
  ref,
  reactive,
  getCurrentInstance,
  onBeforeMount,
  onUnmounted,
  onMounted
} from 'vue'
import Danwei from './../components/Danwei.vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import Tips from './../components/Tips.vue'
export default {
  name: 'search',
  components: {
    Danwei,
    Tips
  },
  setup(props) {
    const message = ref('')
    const store = useStore()
    const state = store.state
    const { scene, maxList } = state
    const route = useRoute()
    const isShowDanwei = ref(false)
    const keyword = ref('')
    const pinDaoId = ref(0)
    const searchParam = {}
    const listnum = computed(() => {
      return state.playList[scene] ? state.playList[scene].length : 0
    })
    const searchList = computed(() => {
      return state.searchList
    })
    //显示单位
    const showDanwei = () => {
      isShowDanwei.value = !isShowDanwei.value
    }
    //子组件单位操作
    const emitDanwei = (e) => {
      isShowDanwei.value = e
    }
    //子组件提交搜索
    const emitGetSearch = (e) => {
      console.log(e)
      pinDaoId.value = e
      startSearch()
      isShowDanwei.value = false
    }
    //回车提交
    let { proxy } = getCurrentInstance()
    const startSearch = (arr) => {
      if (keyword.value == '') {
        pinDaoId.value = ''
        return
      }
      let param = {
        keyword: keyword.value,
        pid: pinDaoId.value
      }
      if (arr.legngth > 0) {
        param = arr
      }
      proxy.$http
        .post('/getSearch', {
          keyword: keyword.value,
          pid: pinDaoId.value
        })
        .then((res) => {
          searchParam.keyword = keyword.value
          searchParam.pid = pinDaoId.value
          pinDaoId.value = ''
          store.commit('setSearch', res.data)
        })
    }
    const changeInput = (e) => {
      keyword.value = e.target.value
    }
    //检测是否点播
    const isList = (arr, val) => {
      for (let i = 0; i <= arr.length; i++) {
        if (arr[i] == val) {
          return true
        }
      }
    }
    const dianBo = (e) => {
      console.log(e.target.dataset.id)
      if (message.value) {
        return
      }
      if (scene == 48 && listnum.value >= maxList) {
        message.value = '💔 当前排队名额（5个）已满，请稍后点播'
        const timer = setTimeout(() => {
          message.value = null
          clearInterval(timer)
        }, 2000)
      } else {
        const id = e.target.dataset.id
        store.dispatch('dianBo', id)
        message.value = '🎉 点播成功'
        startSearch(searchParam)
        const timer = setTimeout(() => {
          message.value = null
          clearInterval(timer)
        }, 2000)
      }
    }
    onMounted(() => {})
    onUnmounted(() => {
      store.commit('setSearch', {})
    })
    return {
      showDanwei,
      isShowDanwei,
      emitDanwei,
      emitGetSearch,
      keyword,
      startSearch,
      changeInput,
      searchList,
      isList,
      scene,
      dianBo,
      message,
      listnum
    }
  }
}
</script>
<style scoped>
.main-list {
  background: url(../images/bg_s.png) no-repeat center -500px #d81519;
  background-size: 100%;
  width: 100%;
  height: 100%;
}
.main-list .subtit {
  background: url(../images/tit.png) no-repeat;
  position: absolute;
  top: 70px;
  left: 20px;
  color: white;
  padding-left: 25px;
  font-size: 12px;
}
.main-list .pd {
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translate(-50%);
  font-size: 12px;
  min-height: 40px;
  width: 95%;
  color: white;
}
.main-list .pd .item {
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 0 8px;
}
.main-list .pd .item .audio {
  display: flex;
  height: 48px;
  background: white;
  border-radius: 10px;
  margin-top: 20px;
  color: black;
  line-height: 48px;
}
.main-list .pd .item .dbc {
  display: flex;
  height: 64px;
  background: white;
  border-radius: 10px;
  margin-top: 20px;
  color: black;
  line-height: 64px;
  box-shadow: 0 0 15px yellow;
  width: 105%;
  margin-left: -8px;
}

.main-list .pd .item .audio .name {
  flex-basis: 40%;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  padding-left: 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.main-list .pd .item .audio .long {
  flex-basis: 30%;
  color: #ad7e7e;
}
.main-list .pd .item .audio .btn {
  flex-basis: 30%;
  font-weight: bold;
  font-size: 14px;
}
.main-list .pd .item .dba .btn {
  background: url(../images/db0.png) no-repeat right;
  text-align: right;
  box-sizing: border-box;
  padding-right: 18px;
}
.main-list .pd .item .db .btn {
  background: url(../images/db.png) no-repeat right;
  color: white;
  text-align: right;
  box-sizing: border-box;
  padding-right: 25px;
}
.main-list .pd .item .dbc .btn {
  background: url(../images/db2.png) no-repeat right;
  color: white;
  text-align: right;
  box-sizing: border-box;
  padding-right: 15px;
}
.main-list .pd .item .tit {
  height: 40px;

  text-align: left;
  line-height: 40px;
  padding-left: 10px;
  position: relative;
  margin-bottom: 20px;
}
.main-list .pd .item .tit .icon {
  height: 40px;
  width: 40px;
  background: url(../images/jiantou.png) no-repeat 12px 12px;
  position: absolute;
  right: 0;
  top: 0;
}
.main-list .pd .item .tit .icon1 {
  height: 40px;
  width: 40px;
  background: url(../images/jiantou.png) no-repeat 12px 12px;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(180deg);
}

.main-list .search {
  position: absolute;
  top: 14px;
  height: 36px;
  background: #b71315;
  width: 234px;
  left: 50%;
  margin-left: -180px;
  border-radius: 36px;
  overflow: hidden;
  text-align: left;
}
.main-list .searchbtn {
  position: absolute;
  top: 14px;
  height: 36px;
  background: #f04a2c url(../images/ld.png) no-repeat 10px 10px;
  line-height: 36px;
  width: 110px;
  right: 10px;
  margin-left: -180px;
  border-radius: 36px;
  overflow: hidden;
  text-align: center;
  color: white;
  font-size: 12px;
}
.main-list .search input::placeholder {
  color: #cccccc;
}
.main-list .search input {
  position: absolute;
  border: 1px solid #b71315;
  background: #b71315;
  height: 34px;
  width: 200px;
  outline: none;
  color: white;
  font-size: 14px;
  left: 30px;
}

.main-list .search .search-icon {
  background: url(../images/icon-search.png) no-repeat;
  height: 22px;
  width: 22px;
  position: absolute;
  left: 12px;
  top: 11px;
}

.main-s .search input::placeholder {
  color: #cccccc;
}
</style>
